<template>
  <div style="font-family: Arial, sans-serif; background-color: #f5f5f5; padding: 0;">
    <!-- 轮播图 -->
    <el-carousel height="500px">
      <el-carousel-item v-for="(slide, index) in slidesShow" :key="index">
        <img :src="slide" class="carousel-image" alt="轮播图" />
      </el-carousel-item>
    </el-carousel>

    <!-- 欢迎标语 -->
    <div style="position: relative; text-align: center; margin-top: -200px;">
      <h1 class="animate__animated animate__bounceInDown" style="color: white; font-size: 48px; font-family: '华文行楷';">
        欢迎来到美丽的旅程！
      </h1>
      <p style="color: white; font-size: 24px; font-family: '华文行楷';">愿每一步都充满惊喜与快乐。</p>
    </div>

    <!-- 搜索框 -->
    <div
        style="
        background: linear-gradient(90deg, #ffffff, #cccfd0);
        padding: 40px 20px;
        text-align: center;
        border-radius: 16px;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
        margin: 20px auto;
        max-width: 1200px;
      "
    >
      <h1 style="color: white; margin: 0; font-size: 32px;">蜗牛旅行</h1>
      <p style="color: white; margin: 10px 0 20px; font-size: 18px;">发现世界的美好</p>
      <el-input
          v-model="searchQuery"
          placeholder="请输入目的地或关键词"
          style="width: 60%; margin-top: 20px;"
          clearable
      >
        <template #append>
          <el-button type="primary" style="background-color: #0d5262; border-color: #03605d; font-size: 16px;">搜索</el-button>
        </template>
      </el-input>
    </div>

    <!-- 热门目的地 -->
    <div style="margin-top: 40px; text-align: center;">
      <h2 style="color: #333; font-size: 24px; font-weight: bold;">热门目的地</h2>
      <div style="display: flex; justify-content: space-around; margin-top: 20px;">
        <div
            v-for="(destination, index) in destinations"
            :key="index"
            style="
            text-align: center;
            width: 22%;
            cursor: pointer;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            position: relative;
            overflow: hidden;
            border-radius: 16px;
          "
            @mouseover="hoverIndex = index"
            @mouseleave="hoverIndex = null"
        >
          <img
              :src="destination.image"
              alt="destination.name"
              style="width: 100%; height: 200px; object-fit: cover; border-radius: 16px; transition: transform 0.3s ease;"
              :style="{ transform: hoverIndex === index ? 'scale(1.1)' : 'scale(1)' }"
          />
          <div
              style="
              position: absolute;
              bottom: 0;
              left: 0;
              right: 0;
              background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
              padding: 10px;
              color: white;
              font-size: 18px;
              font-weight: bold;
              opacity: 0;
              transition: opacity 0.3s ease;
            "
              :style="{ opacity: hoverIndex === index ? 1 : 0 }"
          >
            {{ destination.name }}
          </div>
        </div>
      </div>
    </div>

    <!-- 旅游分类 -->
    <div style="margin-top: 40px; text-align: center;">
      <h2 style="color: #333; font-size: 24px; font-weight: bold;">旅游分类</h2>
      <el-row :gutter="20" style="margin-top: 20px;">
        <el-col :span="6" v-for="(category, index) in categories" :key="index" style="text-align: center;">
          <div
              style="
              background-color: white;
              padding: 20px;
              border-radius: 16px;
              box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
              transition: transform 0.3s ease, box-shadow 0.3s ease;
              cursor: pointer;
              position: relative;
              overflow: hidden;
            "
              @mouseover="hoverCategory = index"
              @mouseleave="hoverCategory = null"
          >
            <img
                :src="category.icon"
                alt="category.name"
                style="width: 60px; height: 60px; transition: transform 0.3s ease;"
                :style="{ transform: hoverCategory === index ? 'scale(1.2)' : 'scale(1)' }"
            />
            <p style="margin-top: 10px; font-size: 18px; color: #333; font-weight: bold;">{{ category.name }}</p>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 推荐景点 -->
    <div style="margin-top: 40px; text-align: center;">
      <h2 style="color: #333; font-size: 24px; font-weight: bold;">推荐景点</h2>
      <el-row :gutter="20" style="margin-top: 20px;">
        <el-col :span="6" v-for="(item, index) in recommendations" :key="index">
          <el-card style="border-radius: 16px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);">
            <img :src="item.image" style="width: 100%; height: 200px; object-fit: cover; border-radius: 16px;" />
            <div style="padding: 10px;">
              <p style="font-weight: bold; font-size: 18px;">{{ item.name }}</p>
              <p style="color: #666; font-size: 14px;">{{ item.location }}</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
<!-- 论坛 -->

</template>

<script setup>
import { ref } from "vue";
// 轮播图数据
const slidesShow = ref([
  "/slideshow/轮播1.jpg",
  "/slideshow/轮播2.2jpg",
  "/slideshow/轮播3.jpg"
]);

// 热门目的地数据
const destinations = ref([
  { name: "北京", image: "/slideshow/轮播图1.1.jpg" },
  { name: "上海", image: "/slideshow/轮播2.2.jpg" },
  { name: "广州", image: "/slideshow/轮播3.3.jpg" },
  { name: "成都", image: "/slideshow/轮播4.jpg" }
]);

// 旅游分类数据
const categories = ref([
  { name: "国内游", icon: "/slideshow/轮播1.jpg" },
  { name: "出境游", icon: "/slideshow/轮播1.jpg" },
  { name: "周边游", icon: "/slideshow/轮播1.jpg" },
  { name: "自驾游", icon: "/slideshow/轮播1.jpg" }
]);

// 推荐景点数据
const recommendations = ref([
  { name: "故宫", location: "北京", image: "/slideshow/g.jpg" },
  { name: "外滩", location: "上海", image: "/slideshow/w.jpg" },
  { name: "珠江夜游", location: "广州", image: "/slideshow/y.jpg" },
  { name: "宽窄巷子", location: "成都", image: "/slideshow/d.jpg" }
]);

// 鼠标悬停状态
const hoverIndex = ref(null);
const hoverCategory = ref(null);
</script>

<style scoped>
.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.animate__animated {
  animation-duration: 1.5s;
}
</style>